@import '~styles/settings';

.c-chose-analysis {
  padding: rem(27px) rem(20px);
  width: 100%;

  .title {
    font-size: 14px;
    font-weight: 500;
    color: $greyish-brown;
    text-align: center;
  }

  .options {
    display: flex;
    justify-content: space-between;
    margin-top: rem(18px);
    padding-bottom: rem(15px);

    button {
      position: relative;
      display: flex;
      align-items: center;
      cursor: pointer;
      width: 48%;

      .button-wrapper {
        height: 100%;
        width: 100%;
      }

      svg {
        fill: $ashes-grey;

        &.icon-square-point {
          width: rem(21px);
          height: rem(21px);
          margin-bottom: rem(12px);
        }

        &.icon-polygon {
          width: rem(25px);
          height: rem(25px);
          margin-bottom: rem(8px);
        }
      }

      .label {
        font-size: 11px;
        line-height: 1.18;
        color: $ashes-grey;
      }

      &.selected {
        &::before {
          content: '';
          position: absolute;
          bottom: rem(-15px);
          left: rem(10px);
          width: calc(100% - #{rem(20px)});
          height: rem(2px);
          background-color: $green-gfw;
        }

        svg {
          fill: $green-gfw;
        }

        .label {
          color: $green-gfw;
        }
      }
    }
  }

  .layer-menu {
    padding-top: rem(33px);
    font-size: 12px;
    line-height: 1.4;

    .layer-title {
      color: $slate;
    }

    .boundary-selector {
      margin-top: rem(17px);

      .select-wrapper {
        width: 100%;
      }
    }

    .layer-description {
      margin-top: rem(24px);
      color: $warm-grey;

      button {
        color: $green-gfw;
        cursor: pointer;

        &:hover {
          color: darken($green-gfw, 10%);
        }
      }
    }
  }

  .draw-menu {
    padding-top: rem(30px);

    &-title {
      font-size: 16px;
      text-align: center;
      margin-bottom: rem(20px);
    }

    &-input {
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      align-items: center;
      padding: rem(30px) rem(20px);
      border: 1px dashed $green-gfw;
      border-radius: 10px;
      font-size: 13px;
      background-color: rgba($green-gfw, 0.1);
      cursor: pointer;
      margin-bottom: rem(20px);

      &:hover {
        background-color: rgba($green-gfw, 0.2);
      }

      p {
        text-align: center;
        line-height: 1.6;
      }

      .small-text {
        font-size: rem(11px);
        opacity: 0.8;
        margin-top: rem(10px);
      }

      .error-title {
        color: $error;
        font-weight: 500;
      }

      .error-desc {
        opacity: 1;
      }

      &.uploading {
        background-color: $white;
      }

      &.error {
        border-color: $error;
        background-color: rgba($error, 0.1);

        &:hover {
          background-color: rgba($error, 0.2);
        }
      }
    }

    &-separator {
      padding: rem(15px) 0;
      text-align: center;
      font-size: rem(16px);
    }

    &-button {
      width: 100%;
    }

    .terms {
      width: 100%;
      margin-top: rem(15px);

      .first-term {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
      }

      p {
        font-size: rem(12px);

        button {
          display: inline;
          margin-left: rem(5px);
        }
      }
    }

    .uploading-shape {
      background-color: $white;
      width: 100%;
      height: 100%;
      border-radius: rem(10px);
      position: relative;

      .file-name {
        font-size: rem(12px);
        margin-bottom: rem(3px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .file-size {
        font-size: rem(12px);
        color: $warm-grey;
      }

      .upload-bar {
        display: flex;
        align-items: center;

        .cancel-upload-btn {
          padding-right: 0;
          padding-left: rem(10px);
        }

        .cancel-upload-icon {
          width: rem(8px);
          height: rem(8px);
        }
      }
    }

    .loading-bar {
      height: rem(6px);
      width: 100%;
      position: relative;

      > span {
        width: 100%;
        height: 100%;
        border-radius: rem(6px);
        position: absolute;
      }

      .full-bar {
        background-color: $grey-dark;
        width: 100%;
        height: 100%;
        z-index: 1;
      }

      .status-bar {
        z-index: 2;
        max-width: 100%;
        background-color: $slate-dark;
        transition: width 0.1s ease-in-out;
      }
    }
  }
}
